<template>
  <div class="components-container">
    <aside>Operate the menu by operating the Button on the right side of the Menu Node. If you have any questions,
      please refer to
      <a href="https://github.com/codemirror/CodeMirror" target="_blank">operationManual</a>,Thanks
    </aside>
    <div class="editor-container">
      <el-row :gutter="10">
        <el-col :xs="22" :sm="12" :md="12" :lg="12" :xl="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>Menu Tree</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="append('one')">添加一级菜单</el-button>
            </div>
            <div class="text item">
              <div class="custom-tree-container">
                <div class="block">
                  <el-tree
                    :data="menuData"
                    empty-text="没有数据"
                    node-key="id"
                    :expand-on-click-node="true"
                    :props="defaultProps"
                  >
                    <span slot-scope="{ node, data }" class="custom-tree-node">
                      <span>{{ node.label }}</span>
                      <span>
                        <el-button
                          type="text"
                          size="mini"
                          @click="() => append(data)"
                        >
                          添加
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click="() => remove(node, data)"
                        >
                          删除
                        </el-button>
                      </span>
                    </span>
                  </el-tree>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="添加菜单">
      <el-form :model="insertMenu" label-width="80px" label-position="left">
        <el-form-item label="菜单名称">
          <el-input v-model="insertMenu.name" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="菜单URL">
          <el-input v-model="insertMenu.url" placeholder="请输入菜单URL"/>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addMenu, deleteMenu, getMenuList } from '@/api/role'
import waves from '@/directive/waves' // waves directive
export default {
  name: 'Menu',
  directives: { waves },
  filters: {},
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      menuData: [],
      dialogVisible: false,
      scopeMenu: {},
      insertMenu: {},
      addFrist: false
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    async getMenus() {
      const res = await getMenuList()
      this.menuData = res.data.children
    },
    append(data) {
      this.insertMenu = {}
      if (data === 'one') {
        this.addFrist = true
      } else {
        this.addFrist = false
        this.scopeMenu = data
      }
      this.dialogVisible = true
    },

    remove(node, data) {
      this.$confirm('确认要删除这个菜单吗? 如果有子菜单将会一起删除。', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const param = {
            id: data.id,
            pid: data.pid
          }
          await deleteMenu(param)
          const parent = node.parent
          console.log(parent)
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => d.id === data.id)
          children.splice(index, 1)
        })
        .catch(err => {
          console.error(err)
        })
    },
    async confirmAdd() {
      const ppid = this.addFrist ? 0 : this.scopeMenu.id
      const param = {
        pid: ppid,
        name: this.insertMenu.name,
        url: this.insertMenu.url
      }
      const res = await addMenu(param)
      const newChild = res.data
      if (res) {
        if (!this.addFrist) {
          if (!this.scopeMenu.children) {
            this.$set(this.scopeMenu, 'children', [])
          }
          this.scopeMenu.children.push(newChild)
        } else {
          this.menuData.push(newChild)
        }
        this.dialogVisible = false
        this.$notify({
          title: 'Success',
          dangerouslyUseHTMLString: true,
          message: `
            <div>菜单ID: ${newChild.id}</div>
            <div>菜单名称: ${newChild.name}</div>
          `,
          type: 'success'
        })
      }
    }
  }
}
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
